<template>
  <!-- 移除外层容器的 fixed 定位，由父组件控制位置 -->
  <div class="flex flex-col gap-4">
    <!-- 导航工具条 -->
    <div class="flex flex-col items-center bg-[#0a1a2f]/80 rounded-lg shadow-lg p-2 border border-[#00eaff]/30 backdrop-blur-md space-y-2">
      <!-- 指北针按钮 -->
      <button
        ref="compassButton"
        @click="resetNorth"
        class="w-9 h-9 flex items-center justify-center rounded-lg bg-[#0a1a2f]/60 border border-[#00eaff]/20 hover:bg-[#1e3a5c]/80 hover:border-[#00eaff]/40 transition-all duration-200"
        :style="{ transform: `rotate(${-bearing}deg)` }"
      >
        <div class="relative w-6 h-6 flex items-center justify-center">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <polygon points="12,4 16,18 12,15 8,18" fill="#00eaff" fill-opacity="0.9" />
            <polygon points="12,4 16,18 12,15 8,18" fill="#fff" fill-opacity="0.4" transform="scale(1,-1) translate(0,-24)" />
          </svg>
          <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-[#00eaff]">N</span>
        </div>
      </button>
      <div class="w-full h-px bg-[#00eaff]/20"></div>
      <button v-for="(item, idx) in navigationTools" :key="idx" 
              @click="item.action" 
              class="w-9 h-9 flex items-center justify-center rounded-lg bg-[#0a1a2f]/60 border border-[#00eaff]/20 hover:bg-[#1e3a5c]/80 hover:border-[#00eaff]/40 transition-all duration-200">
        <i :class="item.icon + ' text-lg text-[#00eaff]'" />
      </button>
    </div>

    <!-- 功能工具条 -->
    <div class="flex flex-col items-center bg-[#0a1a2f]/80 rounded-lg shadow-lg p-2 border border-[#00eaff]/30 backdrop-blur-md space-y-2">
      <button v-for="(item, idx) in featureTools" :key="idx" 
              @click="item.action" 
              class="w-9 h-9 flex items-center justify-center rounded-lg bg-[#0a1a2f]/60 border border-[#00eaff]/20 hover:bg-[#1e3a5c]/80 hover:border-[#00eaff]/40 transition-all duration-200">
        <i :class="item.icon + ' text-lg text-[#00eaff]'" />
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, toRefs } from 'vue'

const props = defineProps({
  map: Object,
  toggleLayerManager: Function,
  switchMapStyle: Function,
  toggleGlobe: Function,
  resetMap: Function,
  toggleFullscreen: Function
})

const { map, toggleLayerManager, switchMapStyle, toggleGlobe, resetMap, toggleFullscreen } = toRefs(props)

const bearing = ref(0)
const compassButton = ref(null)

// 重置地图方向到正北
const resetNorth = () => {
  if (!map.value) return
  map.value.rotateTo(0, { duration: 300 })
}

// 更新指北针旋转角度
const updateBearing = () => {
  if (map.value) bearing.value = map.value.getBearing()
}

// 导航相关工具
const navigationTools = [
  { icon: 'fas fa-plus', action: () => map.value?.zoomIn() },
  { icon: 'fas fa-minus', action: () => map.value?.zoomOut() }
]

// 功能相关工具
const featureTools = [
  { icon: 'fas fa-lightbulb', action: () => switchMapStyle.value?.() },
  { icon: 'fas fa-layer-group', action: () => toggleLayerManager.value?.() },
  { icon: 'fas fa-globe', action: () => toggleGlobe.value?.() },
  { icon: 'fas fa-sync-alt', action: () => resetMap.value?.() },
  { icon: 'fas fa-expand', action: () => toggleFullscreen.value?.() }
]

onMounted(() => {
  if (map.value) {
    map.value.on('rotate', updateBearing)
    updateBearing()
  }
})

onUnmounted(() => {
  if (map.value) {
    map.value.off('rotate', updateBearing)
  }
})
</script>

<style scoped>
button:focus {
  outline: 2px solid #00eaff;
  outline-offset: 2px;
}

/* 自定义指北针样式 */
:deep(.maplibregl-ctrl-compass) {
  width: 36px !important;
  height: 36px !important;
  background: rgba(10, 26, 47, 0.6) !important;
  border: 1px solid rgba(0, 234, 255, 0.2) !important;
  border-radius: 8px !important;
  margin: 0 !important;
  cursor: pointer;
  transition: all 0.2s;
}

:deep(.maplibregl-ctrl-compass:hover) {
  background: rgba(30, 58, 92, 0.8) !important;
  border-color: rgba(0, 234, 255, 0.4) !important;
}

:deep(.maplibregl-ctrl-compass-arrow) {
  background-color: #00eaff !important;
  opacity: 0.8;
  margin: -6px !important;
  width: 20px !important;
  height: 20px !important;
}

:deep(.maplibregl-ctrl-group) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

:deep(.maplibregl-ctrl-group button) {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

/* 隐藏缩放按钮 */
:deep(.maplibregl-ctrl-zoom-in),
:deep(.maplibregl-ctrl-zoom-out) {
  display: none !important;
}
</style>

<!-- 在main.js或App.vue中引入FontAwesome样式 --> 